<template>
    <h2>setup语法糖</h2>
    <div class="person">
      <h2>name:{{ name }}</h2>
      <h2>age:{{ age }}</h2>
      <button @click="showTel" >联系方式</button>
      <button @click="changeAge" >改年龄</button>
    </div>
  
</template>

<!--
  vue3项目中，可以有两个script,一个指定组件名称，
  也可以只有一个，然后名称通过插件  vite-plugin-vue-setup-extend 插件来实现
<script lang='ts'>
  export default{
      name:'person3',
  }
</script>
-->


<script lang="ts" setup name="lesson5 vue">
    //数据，原来是写在data中的，
    let name="zhangsan" //注意，此时的name不是响应式的
    let age = 19 //注意，此时的age不是响应式的
    let tel = '13900000002'

    function showTel(){
        alert(tel)
    }
    function changeAge(){
        console.log("---changeAge---")
        //因为不是响应式，所以，虽然这里age变了，但是页面上不会变化
        age+=1
    }
</script>
<style scoped>
  .person{
      background-color: skyblue;
      border-radius: 3px;
      padding: 5px;
      margin: 2px 5px 2px 5px;
  }
</style>